import React, {JSX, useCallback} from 'react';
import {StyleSheet, View, TouchableOpacity} from 'react-native';
import {BasicText} from '../../../kit/text';
import LinearGradient from 'react-native-linear-gradient';
import {StatusBarHeight} from '../../../config/devices';
import TopTitle from './TopTitle';
import Avatar from '../../../kit/avatar';
import {CopyButtom} from '../../../kit/copy';
import {normalize} from '../../../utils/adapter';
import {SettingIcon} from '../../../kit/icon';
import { useNavigate } from '../../../navigate/navigate';

type Props = {
  onPress?: (value: string) => void;
};

const MyHeader = function ({onPress}: Props): JSX.Element {

  const navigate = useNavigate();


  const handleToSetting = useCallback(() => {
    navigate.navigateSetting();
  },[navigate]);

  return (
    <LinearGradient
      colors={['#FF7A41', '#FF6261']}
      style={styles.header_container}>
      <TopTitle title="个人中心" />
      <View style={styles.avatar_container}>
        <Avatar uri={require('../../../assets/images/avatar.jpg')} />
        <View style={styles.nickname_container}>
          <View style={styles.setting_view}>
            <BasicText>{'蓝月亮#'}</BasicText>
            <TouchableOpacity onPress={handleToSetting}>
              <SettingIcon size="22" fill="#fff" />
            </TouchableOpacity>
          </View>
          <View style={styles.copy_container}>
            <View style={{marginRight: normalize(8)}}>
              <BasicText fontSize={normalize(12)}>
                {'邀请码：' + 1378124383}
              </BasicText>
            </View>
            <CopyButtom
              text={'1378124383'}
              fontSize={normalize(10)}
              color="#FF685A"
              fontWeight={'medium'}
              onPress={onPress}>
              复制
            </CopyButtom>
          </View>
        </View>
      </View>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  header_container: {
    height: normalize(260),
    paddingTop: normalize(StatusBarHeight as number),
  },
  avatar_container: {
    paddingHorizontal: normalize(20),
    marginTop: normalize(10),
    flexDirection: 'row',
  },
  nickname_container: {
    flex: 1,
    marginLeft: normalize(14),
    justifyContent: 'space-around',
  },
  copy_container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  setting_view:{
    display:'flex',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
  },
});

export default React.memo(MyHeader);
